
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Tabs</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link
            href="https://fonts.googleapis.com/css2?family=Red+Hat+Display&display=swap"
            rel="stylesheet"
            type='text/css'
        >
        <link rel="stylesheet" type="text/css" href="style.css">
        <script src="dist/purify.min.js"></script>
    </head>
    <body>
        <div class="container">
            <div class="container-top-ten">
                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="20" viewBox="0 0 14 20" fill="none">
                    <path d="M3.00086 1H11.0009M10.0009 1V7L7.00086 9L4.00086 7V1H10.0009ZM7.00086 9L5.26086 12.29L1.38086 12.82L4.19086 15.38L3.52086 19L7.00086 17.29L10.4809 19L9.81086 15.38L12.6309 12.82L8.74086 12.29L7.00086 9Z" stroke="#BBCFD5" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
                Trending
            </div>
            <header>
                <div class="tabs">
                    <a id="tab1" name="games" href="#tab1">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                            <path d="M12 5h3.5a5 5 0 0 1 0 10h-5.5l-4.015 4.227a2.3 2.3 0 0 1 -3.923 -2.035l1.634 -8.173a5 5 0 0 1 4.904 -4.019h3.4z"></path>
                            <path d="M14 15l4.07 4.284a2.3 2.3 0 0 0 3.925 -2.023l-1.6 -8.232"></path>
                            <path d="M8 9v2"></path>
                            <path d="M7 10h2"></path>
                            <path d="M14 10h2"></path>
                        </svg>
                        Games
                    </a>
                    <a id="tab2" name="movies" href="#tab2">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                            <path d="M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z"></path>
                            <path d="M8 4l0 16"></path>
                            <path d="M16 4l0 16"></path>
                            <path d="M4 8l4 0"></path>
                            <path d="M4 16l4 0"></path>
                            <path d="M4 12l16 0"></path>
                            <path d="M16 8l4 0"></path>
                            <path d="M16 16l4 0"></path>
                        </svg>
                        Movies
                    </a>
                    <a id="tab3" name="books" href="#tab3">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                            <path d="M3 19a9 9 0 0 1 9 0a9 9 0 0 1 9 0"></path>
                            <path d="M3 6a9 9 0 0 1 9 0a9 9 0 0 1 9 0"></path>
                            <path d="M3 6l0 13"></path>
                            <path d="M12 6l0 13"></path>
                            <path d="M21 6l0 13"></path>
                        </svg>
                        Books
                    </a>
                </div>
            </header>
            <div class="tab-content-wrapper">
                <div id="tab1-content" class="tab-content">
                </div>
                <div id="tab2-content" class="tab-content">
                </div>
                <div id="tab3-content" class="tab-content">
                </div>
            </div>
        </div>
        <script src="script.js"></script>
    </body>
</html>
    